<template>
  <li class="active treeview menu-open">
    <a v-if="model.type==0" @click="menuOpen(index)">
      <i :class="model.icon"></i>
      <span></span>
      <span class="pull-right-container">
                    <i class="fa fa-angle-left pull-right"></i>
                  </span>
      {{ model.title}}
    </a>
    <router-link v-else-if="model.type==1" :to="model.url">
      <i :class="model.icon"></i>
      {{model.title}}
    </router-link>
    <ul v-if="model.children && model.children.length" class="treeview-menu" v-show="model.show">
      <tree-menu v-for="(item,index) in model.children" :key="index" :model="item"></tree-menu>
    </ul>
  </li>
</template>

<script>
  export default {
    name: 'treeMenu',
    props: ['model','index'],
    data() {
      return {
        show:false
      }
    },
    methods: {
      menuOpen:function (index) {
        this.model.show = !this.model.show
      }
    },
    created() {
    }
  }
</script>
